<template>
  <div class="button-box">
    <div class="btn-1">
      <button
        data-text="Start"
        class="btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up"
      >
        <div class="btn-borders">
          <div class="border-top"></div>
          <div class="border-right"></div>
          <div class="border-bottom"></div>
          <div class="border-left"></div>
        </div>
        <span class="btn-text">Start</span>
      </button>
    </div>
    <div class="btn-2">
      <button class="btn btn-primary btn-ghost btn-shine">
        hover me
      </button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'buttonBox',
  data () {
    return {
      msg:''
    }
  }
}
</script>
 
<style scoped lang="scss">
.button-box {
  .btn-1 {
    .btn {
      --hue: 190;
      --ease-in-duration: 0.25s;
      --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
      --ease-out-duration: 0.65s;
      --ease-out-delay: var(--ease-in-duration);
      --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
      position: relative;
      padding: 1rem 3rem;
      font-size: 1rem;
      line-height: 1.5;
      color: white;
      text-decoration: none;
      background-color: hsl(var(--hue), 100%, 41%);
      border: 1px solid hsl(var(--hue), 100%, 41%);
      outline: transparent;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      transition: 0.25s;

      &:hover {
        background: hsl(var(--hue), 100%, 31%);
      }

      &-primary {
        --hue: 171;
      }

      &-ghost {
        color: hsl(var(--hue), 100%, 41%);
        background-color: transparent;
        border-color: hsl(var(--hue), 100%, 41%);

        &:hover {
          color: white;
        }
      }

      &-border-stroke {
        border-color: hsla(var(--hue), 100%, 41%, 0.35);

        .btn-borders {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;

          .border-top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 1px;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleX(0);
            transform-origin: left;
          }

          .border-right {
            position: absolute;
            right: 0;
            width: 1px;
            height: 100%;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleY(0);
            transform-origin: bottom;
          }

          .border-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleX(0);
            transform-origin: left;
          }

          .border-left {
            position: absolute;
            left: 0;
            width: 1px;
            height: 100%;
            background: hsl(var(--hue), 100%, 41%);
            transform: scaleY(0);
            transform-origin: bottom;
          }

          // when unhover, ease-out left, bottom; ease-in right, top

          .border-left {
            transition: var(--ease-out-duration) var(--ease-out-delay)
              var(--ease-out-exponential);
          }
          .border-bottom {
            transition: var(--ease-out-duration) var(--ease-out-delay)
              var(--ease-out-exponential);
          }

          .border-right {
            transition: var(--ease-in-duration) var(--ease-in-exponential);
          }
          .border-top {
            transition: var(--ease-in-duration) var(--ease-in-exponential);
          }
        }

        &:hover {
          color: hsl(var(--hue), 100%, 41%);
          background: transparent;

          .border-top,
          .border-bottom {
            transform: scaleX(1);
          }
          .border-left,
          .border-right {
            transform: scaleY(1);
          }

          // when hover, ease-in left, bottom; ease-out right, top

          .border-left {
            transition: var(--ease-in-duration) var(--ease-in-exponential);
          }
          .border-bottom {
            transition: var(--ease-in-duration) var(--ease-in-exponential);
          }

          .border-right {
            transition: var(--ease-out-duration) var(--ease-out-delay)
              var(--ease-out-exponential);
          }
          .border-top {
            transition: var(--ease-out-duration) var(--ease-out-delay)
              var(--ease-out-exponential);
          }
        }
      }

      &-text-float-up {
        &::after {
          position: absolute;
          content: attr(data-text);
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          opacity: 0;
          transform: translateY(35%);
          transition: 0.25s ease-out;
        }

        // when hover, ease-in top-text; ease-out bottom-text

        .btn-text {
          display: block;
          transition: 0.75s 0.1s var(--ease-out-exponential);
        }

        &:hover {
          // when hover, ease-in bottom-text; ease-out top-text

          .btn-text {
            opacity: 0;
            transform: translateY(-25%);
            transition: 0.25s ease-out;
          }

          &::after {
            opacity: 1;
            transform: translateY(0);
            transition: 0.75s 0.1s var(--ease-out-exponential);
          }
        }
      }
    }
  }

  .btn-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    .btn {
      --hue: 190;
      position: relative;
      padding: 1rem 3rem;
      font-size: 1rem;
      line-height: 1.5;
      color: hsl(var(--hue), 100%, 41%);
      text-decoration: none;
      text-transform: uppercase;
      background-color: hsl(var(--hue), 100%, 41%);
      border: 1px solid hsl(var(--hue), 100%, 41%);
      outline: transparent;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      transition: 0.25s;

      &:hover {
        background: hsl(var(--hue), 100%, 31%);
      }

      &-primary {
        --hue: 187;
      }

      &-ghost {
        color: hsl(var(--hue), 100%, 41%);
        background-color: transparent;
        border-color: hsl(var(--hue), 100%, 41%);

        &:hover {
          // color: white;
        }
      }

      &-shine {
        // color: white;

        &::before {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            120deg,
            transparent,
            hsla(var(--hue), 100%, 41%, 0.5),
            transparent
          );
          transform: translateX(-100%);
          transition: 0.6s;
        }

        &:hover {
          background: transparent;
          box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
        }

        &:hover::before {
          transform: translateX(100%);
        }
      }
    }
  }
}
</style>